<template>
  <div>
    <div class="content mb50">
      <div class="userhead">
        <router-link to="/my_userinfo">
        <div class="my-btn account">账号信息</div>
        </router-link>
        <div class=" loginout my-btn">退出登录</div>
        <div class="my-touxiang">
          <img src="./images/tx.png"/>
        </div>
        <div class="user">
          <p>我爱百川名品</p>
          <span>一级会员</span>
        </div>

      </div>
      <div class="tool">
        <ul class="toolbar">
          <router-link to="/my_coupon">
            <li>
              <span>99</span>
              <p>优惠券</p>
            </li>
          </router-link>
          <router-link to="/my_collection">
            <li>
              <span>99</span>
              <p>我的收藏</p>
            </li>
          </router-link>
          <router-link to="/my_address">
          <li>
            <span>6</span>
            <p>我的地址</p>
          </li>
          </router-link>
        </ul>
      </div>

      <div class="order">
        <div class="all">
          <span class="fl">我的订单</span>
          <span class="fr"></span>
        </div>
        <ul class="orderbar">
          <router-link :to="{ path: '/my_order/', query: {type:0} }">
          <li>
            <img src="./images/over-icon.svg">
            <span>全部订单</span>
          </li>
          </router-link>

          <router-link :to="{ path: '/my_order/', query: {type:1} }">
            <li class="daipay">
              <img src="./images/waitpay-icon.svg">
              <span>待付款</span>
            </li>
          </router-link>

            <router-link :to="{ path: '/my_order/', query: {type:2} }">
          <li>
            <img src="./images/waitfa-iconicon.svg">
            <span>待发货</span>
          </li>
          </router-link>

          <router-link :to="{ path: '/my_order/', query: {type:3} }">
          <li>
            <img src="./images/waitshou-icon.svg">
            <span>待收货</span>
          </li>
          </router-link>

          <router-link :to="{ path: '/my_order/', query: {type:4} }">
          <li>
            <img src="./images/waitping-icon.svg">
            <span>待评价</span>
          </li>
          </router-link>
        </ul>
        <router-link to="/my_vip">
          <div class="vip">
            <div class="vip-con">
              <img src="./images/vip-icon.svg" alt="">
              <span class="tequan">会员特权</span>
              <span class="quanyi">会员享有更多权益 > </span>
            </div>
          </div>
        </router-link>
      </div>
      <div class="service">

        <ul>
          <li>
            <img src="./images/yqyl-icon.svg">
            <span>邀请有礼</span>
          </li>
          <router-link to="/my_footprint">
            <li>
              <img src="./images/wdzj-icon.svg">
              <span>我的足迹</span>
            </li>
          </router-link>
          <router-link to="/unline_shop">
            <li>
              <img src="./images/xxmd-icon.svg">
              <span>线下门店</span>
            </li>
          </router-link>
          <li>
            <img src="./images/gywm-icon.svg">
            <span>关于我们</span>
          </li>
          <router-link to="/my_kefu">
            <li>
              <img src="./images/kf-icon.svg">
              <span>客服</span>
            </li>
          </router-link>
        </ul>

      </div>
    </div>

  </div>

</template>

<script>

</script>


<style scoped>

  .content {
    text-align: center;
  }
  a{
    color: #fff;
  }

  .userhead {
    width: 100%;
    height: 11.5rem;
    background: url('./images/my-bg.svg') no-repeat center 0;
    background-size: cover;
    color: #ffffff;
  }

  .userhead .account {
    position: absolute;
    font-size: 0.55rem;
    left: 10%;
    top: 1.5rem;
    color: #fff;
  }

  .userhead .loginout {
    position: absolute;
    right: 10%;
    top: 1.5rem;
    font-size: 0.55rem;
  }

  .my-btn {
    border-radius: 5rem;
    padding: .2rem .75rem;
    background: #e74343;
    border: 1px solid #ffffff;
  }

  .my-touxiang {
    position: absolute;
    top: .5rem;
    left: calc(50% - 1.75rem);
    width: 3.5rem;
    height: 3.5rem;
  }

  .my-touxiang img {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 10rem;
  }

  .userhead .user {
    position: absolute;
    width: 100%;
    top: 4.75rem;
    line-height: 1.3;
    font-size: 0.8rem;
  }

  .userhead .user span {
    color: #EDBC64;
    font-size: 0.5rem;
    opacity: .7;
    background-color: #3b3b3b;
    border-radius: 5rem;
    padding: .1rem .5rem;
    display: inline-block;
    text-align: center;
    margin-top: 0.5rem;
  }

  .tool {
    height: 8rem;
    background-color: #ffffff;
    position: relative;
    line-height: 2;
    text-align: center;
    clear: both;
  }

  .toolbar li {
    float: left;
    position: relative;
    top: 4.5rem;
    width: 33.33%
  }

  .toolbar li span {
    color: #E93B3D;
    font-size: .85rem;
  }

  .toolbar li p {
    color: #555;
    font-size: 0.65rem;
  }

  .order {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0.2rem;
    position: absolute;
    top: 8.5rem;
    left: .75rem;
    right: .75rem;
  }

  .order .all {
    height: 1.8rem;
    color: #999;
  }

  .all span {
    font-size: 0.6rem;
    padding: .5rem;
  }

  .orderbar li {
    float: left;
    width: 20%;
    text-align: center;
    font-size: .6rem;
    color: #555;
    margin: .25rem 0;
  }

  .orderbar li span {
    display: block;
    line-height: 2.5;
  }

  .order .vip {
    width: 100%;
    height: 2.2rem;
    background: url("./images/group4.svg") no-repeat center 0;
    background-size: cover;
    border-radius: .2rem;
    clear: both;
  }

  .vip-con {
    padding: .75rem;
    text-align: left;
    position: relative;
  }

  .vip-con .tequan {
    font-size: .65rem;
    color: #fff;
  }

  .vip-con .quanyi {
    position: absolute;
    font-size: .55rem;
    color: #fff;
    right: .5rem;
    margin-top: .15rem;
  }

  .service {
    position: relative;
    height: 5rem;
    background: #ffffff;
    margin-top: .5rem;
    vertical-align: middle;
    padding-top: 1.15rem;
  }

  .service ul li {
    float: left;
    width: 20%;
    text-align: center;
    font-size: .6rem;
    color: #555;
  }

  .service li span {
    display: block;
    line-height: 1.5rem;
  }
.mb50{ margin-bottom:2.5rem;}

</style>
